<template>
    <div class="search">
        <form action="/">
            <van-search
                    v-model="searchKey"
                    show-action
                    placeholder="请输入搜索关键词"
                    @search="onSearch"
                    @cancel="onCancel"
            />
        </form>
        <music-list :music-list="musicList"></music-list>
    </div>
</template>

<script>
    import axios from '../http/axios'
    import MusicList from '../components/MusicList'

    export default {
        data() {
            return {
                searchKey: '',
                musicList: []
            };
        },
        components: {
            MusicList
        },
        methods: {
            onSearch() {
                axios.get('/api/getMusicList?q=' + this.searchKey)
                    .then(res => {
                        this.musicList = res.data.data.map(item => {
                            return Object.assign(item, {isPlay: false})
                        })
                        this.$store.commit('updateMusicList', this.musicList)
                    })
            },
            onCancel() {
                this.$router.back();
            }
        },
        created() {
        }
    };
</script>

<style>
</style>
